@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/message/MessageRoot.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { messageMarker } from '../../internal/markers.stylex.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+	import { setMessageContext, type MessageFrom } from './context.js';
+
+	export type MessageRootProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** Who wrote it. The person's messages sit at the end of the line, in a bubble. */
+		from?: MessageFrom;
+		/**
+		 * Set while the reply is still arriving. The message is marked busy, so
+		 * assistive technology reads it once, when it is complete.
+		 */
+		streaming?: boolean;
+		sx?: Sx;
+		ref?: HTMLElement | null;
+		/** A Message.Content, and optionally Message.Actions. */
+		children?: Snippet;
+	};
+
+	const FINE = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		root: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.375rem',
+			minWidth: 0,
+			color: colors.text,
+			fontFamily: font.body
+		},
+		// The person's message opens a new exchange, so it stands further from the
+		// reply before it than a reply stands from its question. With a mouse, its
+		// actions sit beside the bubble, at its foot, so they take no height.
+		user: {
+			alignItems: 'flex-end',
+			flexDirection: { default: 'column', [FINE]: 'row-reverse' },
+			gap: { default: '0.375rem', [FINE]: '0.25rem' },
+			marginBlockStart: { default: '1.5rem', ':first-child': 0 }
+		},
+		assistant: { alignItems: 'stretch' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		from = 'assistant',
+		streaming = false,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: MessageRootProps = $props();
+
+	setMessageContext({
+		get from() {
+			return from;
+		},
+		get streaming() {
+			return streaming;
+		}
+	});
+</script>
+
+<article
+	bind:this={ref}
+	aria-busy={streaming || undefined}
+	data-slot="message"
+	data-from={from}
+	data-streaming={streaming || undefined}
+	{...rest}
+	{...attrs([styles.root, styles[from], messageMarker, sx], className)}
+>
+	{@render children?.()}
+</article>

package/dist/components/message/MessageRoot.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';
+import { type MessageFrom } from './context.js';
+export type MessageRootProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Who wrote it. The person's messages sit at the end of the line, in a bubble. */
+    from?: MessageFrom;
+    /**
+     * Set while the reply is still arriving. The message is marked busy, so
+     * assistive technology reads it once, when it is complete.
+     */
+    streaming?: boolean;
+    sx?: Sx;
+    ref?: HTMLElement | null;
+    /** A Message.Content, and optionally Message.Actions. */
+    children?: Snippet;
+};
+declare const MessageRoot: import("svelte").Component<MessageRootProps, {}, "ref">;
+type MessageRoot = ReturnType<typeof MessageRoot>;
+export default MessageRoot;

package/dist/components/message/MessageTime.svelte

@@ -0,0 +1,58 @@
+<!--
+	When a message was sent. Revealed with the message's actions on hover or
+	focus, in space they already hold, so it moves nothing.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { messageMarker } from '../../internal/markers.stylex.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion } from '../../tokens.stylex.js';
+
+	export type MessageTimeProps = {
+		/** When it was sent. */
+		date: Date;
+		/** How it is shown; by default the time of day, in the person's locale. */
+		format?: (date: Date) => string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const FINE = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		time: {
+			paddingInline: '0.375rem',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			fontVariantNumeric: 'tabular-nums',
+			whiteSpace: 'nowrap',
+			opacity: {
+				default: 1,
+				[FINE]: {
+					default: 0,
+					[stylex.when.ancestor(':hover', messageMarker)]: 1,
+					[stylex.when.ancestor(':focus-within', messageMarker)]: 1
+				}
+			},
+			transitionProperty: 'opacity',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		}
+	});
+
+	const timeOfDay = (date: Date) =>
+		date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+</script>
+
+<script lang="ts">
+	let { date, format = timeOfDay, sx, class: className }: MessageTimeProps = $props();
+</script>
+
+<time
+	datetime={date.toISOString()}
+	title={date.toLocaleString()}
+	data-slot="message-time"
+	{...attrs([styles.time, sx], className)}
+>
+	{format(date)}
+</time>

package/dist/components/message/MessageTime.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Sx } from '../../internal/sx.js';
+export type MessageTimeProps = {
+    /** When it was sent. */
+    date: Date;
+    /** How it is shown; by default the time of day, in the person's locale. */
+    format?: (date: Date) => string;
+    sx?: Sx;
+    class?: string;
+};
+declare const MessageTime: import("svelte").Component<MessageTimeProps, {}, "">;
+type MessageTime = ReturnType<typeof MessageTime>;
+export default MessageTime;

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

@@ -0,0 +1,7 @@
+export type MessageFrom = 'user' | 'assistant';
+export type MessageContext = {
+    readonly from: MessageFrom;
+    readonly streaming: boolean;
+};
+export declare function setMessageContext(context: MessageContext): void;
+export declare function getMessageContext(part: string): MessageContext;

package/dist/components/message/context.js

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

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

@@ -0,0 +1,18 @@
+import Action from './MessageAction.svelte';
+import Actions from './MessageActions.svelte';
+import Content from './MessageContent.svelte';
+import Copy from './MessageCopy.svelte';
+import Header from './MessageHeader.svelte';
+import Pending from './MessagePending.svelte';
+import Root from './MessageRoot.svelte';
+import Time from './MessageTime.svelte';
+export { Root, Header, Pending, Content, Actions, Action, Copy, Time, Root as MessageRoot, Header as MessageHeader, Pending as MessagePending, Content as MessageContent, Actions as MessageActions, Action as MessageAction, Copy as MessageCopy, Time as MessageTime };
+export type { MessageFrom } from './context.js';
+export type { MessageActionProps } from './MessageAction.svelte';
+export type { MessageActionsProps } from './MessageActions.svelte';
+export type { MessageContentProps } from './MessageContent.svelte';
+export type { MessageCopyProps } from './MessageCopy.svelte';
+export type { MessageHeaderProps } from './MessageHeader.svelte';
+export type { MessagePendingProps } from './MessagePending.svelte';
+export type { MessageRootProps } from './MessageRoot.svelte';
+export type { MessageTimeProps } from './MessageTime.svelte';

package/dist/components/message/index.js

@@ -0,0 +1,11 @@
+import Action from './MessageAction.svelte';
+import Actions from './MessageActions.svelte';
+import Content from './MessageContent.svelte';
+import Copy from './MessageCopy.svelte';
+import Header from './MessageHeader.svelte';
+import Pending from './MessagePending.svelte';
+import Root from './MessageRoot.svelte';
+import Time from './MessageTime.svelte';
+export { Root, Header, Pending, Content, Actions, Action, Copy, Time, 
+//
+Root as MessageRoot, Header as MessageHeader, Pending as MessagePending, Content as MessageContent, Actions as MessageActions, Action as MessageAction, Copy as MessageCopy, Time as MessageTime };

package/dist/components/notice/Notice.svelte

@@ -0,0 +1,111 @@
+<!--
+	A note in place: what is happening, or went wrong, and what to do about it.
+	The detail is always on show, never kept in a tooltip.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	export type NoticeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+	export type NoticeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		tone?: NoticeTone;
+		/** A second line, such as the cause or the next step. Always visible. */
+		detail?: string;
+		/** Shows a spinner in place of the icon, for work under way. */
+		busy?: boolean;
+		/** An icon of your own, in place of the tone's. */
+		icon?: Snippet;
+		/** Buttons at the end, such as Retry. */
+		actions?: Snippet;
+		/**
+		 * Announces the notice as it appears: at once for danger, politely for
+		 * the rest. Leave it off for notes that are there from the start.
+		 */
+		live?: boolean;
+		sx?: Sx;
+		/** What the notice says. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		notice: {
+			display: 'grid',
+			gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+			alignItems: 'start',
+			columnGap: '0.625rem',
+			paddingBlock: '0.625rem',
+			paddingInline: '0.75rem',
+			borderRadius: radius.lg,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingSnug
+		},
+		neutral: {
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.text
+		},
+		info: { backgroundColor: colors.ithilSoft, color: colors.text },
+		success: { backgroundColor: colors.successSoft, color: colors.successInk },
+		warning: { backgroundColor: colors.warningSoft, color: colors.warningInk },
+		danger: { backgroundColor: colors.dangerSoft, color: colors.dangerInk },
+		icon: { display: 'grid', placeItems: 'center', width: '1rem', height: '1lh' },
+		iconNeutral: { color: colors.textMuted },
+		iconInfo: { color: colors.ithil },
+		text: { display: 'flex', flexDirection: 'column', gap: '0.125rem', minWidth: 0 },
+		title: { fontWeight: font.weightMedium },
+		detail: { opacity: 0.85, fontSize: font.sizeSm, userSelect: 'text', overflowWrap: 'anywhere' },
+		actions: { display: 'flex', alignItems: 'center', gap: '0.25rem', marginBlock: '-0.25rem' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		tone = 'neutral',
+		detail,
+		busy = false,
+		icon,
+		actions,
+		live = false,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: NoticeProps = $props();
+</script>
+
+<div
+	role={live ? (tone === 'danger' ? 'alert' : 'status') : undefined}
+	data-slot="notice"
+	data-tone={tone}
+	{...rest}
+	{...attrs([styles.notice, styles[tone], sx], className)}
+>
+	<span
+		{...stylex.attrs(
+			styles.icon,
+			tone === 'neutral' && styles.iconNeutral,
+			tone === 'info' && styles.iconInfo
+		)}
+	>
+		{#if busy}
+			<Spinner size={14} label={null} />
+		{:else if icon}
+			{@render icon()}
+		{:else if tone === 'success'}
+			<Glyph name="check" stroke={1.75} />
+		{:else}
+			<Glyph name="alert" />
+		{/if}
+	</span>
+	<span {...stylex.attrs(styles.text)}>
+		<span {...stylex.attrs(styles.title)}>{@render children?.()}</span>
+		{#if detail}<span {...stylex.attrs(styles.detail)}>{detail}</span>{/if}
+	</span>
+	{#if actions}<span {...stylex.attrs(styles.actions)}>{@render actions()}</span>{/if}
+</div>

package/dist/components/notice/Notice.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type NoticeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type NoticeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    tone?: NoticeTone;
+    /** A second line, such as the cause or the next step. Always visible. */
+    detail?: string;
+    /** Shows a spinner in place of the icon, for work under way. */
+    busy?: boolean;
+    /** An icon of your own, in place of the tone's. */
+    icon?: Snippet;
+    /** Buttons at the end, such as Retry. */
+    actions?: Snippet;
+    /**
+     * Announces the notice as it appears: at once for danger, politely for
+     * the rest. Leave it off for notes that are there from the start.
+     */
+    live?: boolean;
+    sx?: Sx;
+    /** What the notice says. */
+    children?: Snippet;
+};
+declare const Notice: import("svelte").Component<NoticeProps, {}, "">;
+type Notice = ReturnType<typeof Notice>;
+export default Notice;

package/dist/components/plan/Plan.svelte

@@ -0,0 +1,198 @@
+<!-- What the agent means to do, ticked off as it goes. Only the latest plan is shown. -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import Glyph from '../../internal/Glyph.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 Spinner from '../spinner/Spinner.svelte';
+
+	export type PlanStepStatus = 'pending' | 'active' | 'done' | 'skipped';
+	export type PlanStep = { label: string; status: PlanStepStatus };
+
+	export type PlanProps = {
+		steps: PlanStep[];
+		title?: string;
+		/** How the progress is said: "2 of 4". */
+		progressLabel?: (done: number, total: number) => string;
+		skippedLabel?: string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		plan: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.625rem',
+			paddingTop: '0.75rem',
+			paddingBottom: '0.5rem',
+			paddingInline: '0.5rem',
+			borderRadius: radius.lg,
+			backgroundColor: colors.surface,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 0 ${colors.highlight}, 0 1px 2px ${colors.shade}`
+		},
+		head: {
+			display: 'flex',
+			alignItems: 'baseline',
+			justifyContent: 'space-between',
+			gap: '0.75rem',
+			margin: 0,
+			paddingInline: '0.375rem'
+		},
+		title: {
+			color: colors.text,
+			fontSize: font.sizeSm,
+			fontWeight: font.weightSemibold
+		},
+		// One segment per step: lit as each is done, half-lit while one is under way
+		track: {
+			display: 'flex',
+			gap: '0.1875rem',
+			paddingInline: '0.375rem'
+		},
+		segment: {
+			flexGrow: 1,
+			height: '0.1875rem',
+			borderRadius: radius.full,
+			backgroundColor: colors.line,
+			transitionProperty: 'background-color, box-shadow',
+			transitionDuration: motion.slow,
+			transitionTimingFunction: 'ease'
+		},
+		segmentDone: { backgroundColor: colors.ithil, boxShadow: `0 0 6px ${colors.glow}` },
+		segmentActive: { backgroundColor: `color-mix(in oklab, ${colors.ithil} 40%, transparent)` },
+		steps: {
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '0.0625rem',
+			margin: 0,
+			padding: 0,
+			listStyleType: 'none'
+		},
+		step: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.625rem',
+			minHeight: '1.875rem',
+			paddingInline: '0.375rem',
+			borderRadius: radius.md,
+			color: colors.textMuted,
+			fontSize: font.sizeMd,
+			lineHeight: font.leadingSnug,
+			transitionProperty: 'color, background-color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		// The step under way sits in a band of moonlight
+		active: {
+			backgroundColor: colors.ithilSoft,
+			color: colors.text,
+			fontWeight: font.weightMedium
+		},
+		done: { color: colors.textSubtle },
+		// A step's new state settles into place, so the change is noticed
+		icon: {
+			display: 'grid',
+			placeItems: 'center',
+			flexShrink: 0,
+			boxSizing: 'border-box',
+			width: '1rem',
+			height: '1rem',
+			borderRadius: radius.full,
+			color: colors.textSubtle,
+			opacity: { default: 1, '@starting-style': 0 },
+			scale: { default: null, [MOTION]: { default: 1, '@starting-style': 0.6 } },
+			transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		iconActive: { color: colors.ithil },
+		// Done: a solid green seal with the tick cut out of it
+		iconDone: { backgroundColor: colors.success, color: colors.bgRaised },
+		iconSkipped: { boxShadow: `inset 0 0 0 1px ${colors.lineStrong}` },
+		skipped: { color: colors.textSubtle, fontSize: font.sizeSm, fontWeight: font.weightRegular },
+		hidden: {
+			position: 'absolute',
+			width: '1px',
+			height: '1px',
+			overflow: 'hidden',
+			clipPath: 'inset(50%)',
+			whiteSpace: 'nowrap'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		steps,
+		title = 'Plan',
+		progressLabel = (done, total) => `${done} of ${total}`,
+		skippedLabel = 'skipped',
+		sx,
+		class: className
+	}: PlanProps = $props();
+
+	const uid = $props.id();
+	const done = $derived(steps.filter((step) => step.status === 'done').length);
+</script>
+
+<section aria-labelledby="{uid}-title" data-slot="plan" {...attrs([styles.plan, sx], className)}>
+	<p {...stylex.attrs(styles.head)}>
+		<span id="{uid}-title" {...stylex.attrs(styles.title)}>{title}</span>
+		<span {...stylex.attrs(shared.eyebrow)}>{progressLabel(done, steps.length)}</span>
+	</p>
+	<div aria-hidden="true" {...stylex.attrs(styles.track)}>
+		{#each steps as step, index (index)}
+			<span
+				{...stylex.attrs(
+					styles.segment,
+					step.status === 'done' && styles.segmentDone,
+					step.status === 'active' && styles.segmentActive
+				)}
+			></span>
+		{/each}
+	</div>
+	<ol {...stylex.attrs(styles.steps)}>
+		{#each steps as step, index (index)}
+			<li
+				aria-current={step.status === 'active' ? 'step' : undefined}
+				{...stylex.attrs(
+					styles.step,
+					step.status === 'active' && styles.active,
+					step.status === 'done' && styles.done
+				)}
+			>
+				{#key step.status}
+					<span
+						{...stylex.attrs(
+							styles.icon,
+							step.status === 'active' && styles.iconActive,
+							step.status === 'done' && styles.iconDone,
+							step.status === 'skipped' && styles.iconSkipped
+						)}
+					>
+						{#if step.status === 'active'}
+							<Spinner size={14} label={null} />
+						{:else if step.status === 'done'}
+							<Glyph name="check" size={11} stroke={2.25} />
+						{:else if step.status === 'skipped'}
+							<Glyph name="minus" size={10} stroke={1.75} />
+						{:else}
+							<Glyph name="dashed" size={16} stroke={1.25} />
+						{/if}
+					</span>
+				{/key}
+				<span>
+					{step.label}{#if step.status === 'skipped'}<span {...stylex.attrs(styles.skipped)}>
+							· {skippedLabel}</span
+						>{:else if step.status === 'done'}<span {...stylex.attrs(styles.hidden)}>
+							(done)</span
+						>{/if}
+				</span>
+			</li>
+		{/each}
+	</ol>
+</section>

package/dist/components/plan/Plan.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Sx } from '../../internal/sx.js';
+export type PlanStepStatus = 'pending' | 'active' | 'done' | 'skipped';
+export type PlanStep = {
+    label: string;
+    status: PlanStepStatus;
+};
+export type PlanProps = {
+    steps: PlanStep[];
+    title?: string;
+    /** How the progress is said: "2 of 4". */
+    progressLabel?: (done: number, total: number) => string;
+    skippedLabel?: string;
+    sx?: Sx;
+    class?: string;
+};
+declare const Plan: import("svelte").Component<PlanProps, {}, "">;
+type Plan = ReturnType<typeof Plan>;
+export default Plan;

package/dist/components/popover/PopoverContent.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import { Popover } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type PopoverContentProps = Omit<Popover.ContentProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		// Room for content of its own, rather than a list of items
+		padded: { padding: '0.75rem', minWidth: 'max(16rem, var(--bits-floating-anchor-width, 0px))' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		sideOffset = 6,
+		collisionPadding = 8,
+		align = 'start',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: PopoverContentProps = $props();
+</script>
+
+<Popover.Portal>
+	<Popover.Content
+		{sideOffset}
+		{collisionPadding}
+		{align}
+		data-slot="popover-content"
+		{...rest}
+		{...attrs([layer.surface, styles.padded, sx], className)}
+	>
+		{@render children?.()}
+	</Popover.Content>
+</Popover.Portal>

package/dist/components/popover/PopoverContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Popover } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type PopoverContentProps = Omit<Popover.ContentProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

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

@@ -0,0 +1,7 @@
+import { Popover } from 'bits-ui';
+import Content from './PopoverContent.svelte';
+declare const Root: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<Popover.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<Popover.CloseProps, {}, "ref">;
+export { Root, Trigger, Content, Close };
+export type { PopoverContentProps } from './PopoverContent.svelte';

package/dist/components/popover/index.js

@@ -0,0 +1,7 @@
+import { Popover } from 'bits-ui';
+import Content from './PopoverContent.svelte';
+// Behaviour only: bits-ui's own parts
+const Root = Popover.Root;
+const Trigger = Popover.Trigger;
+const Close = Popover.Close;
+export { Root, Trigger, Content, Close };