@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/tooltip/TooltipRoot.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import { Tooltip } from 'bits-ui';
+	import { setContext } from 'svelte';
+	import { arrivedByKeyboard, listenForNavigation } from './intent.js';
+
+	import type { Snippet } from 'svelte';
+
+	export type TooltipRootProps = Omit<Tooltip.RootProps, 'children'> & {
+		/** A Tooltip.Trigger and a Tooltip.Content. */
+		children?: Snippet;
+	};
+	export const HOVER_KEY = Symbol('narvi.tooltip.hover');
+</script>
+
+<script lang="ts">
+	let { open = $bindable(false), children, ...rest }: TooltipRootProps = $props();
+
+	listenForNavigation();
+
+	// The trigger says when the pointer is over it; anything else that opens the
+	// tooltip is focus, which only counts when it came from the keyboard
+	let hovering = false;
+	setContext(HOVER_KEY, (value: boolean) => (hovering = value));
+</script>
+
+<Tooltip.Root
+	bind:open={
+		() => open,
+		(next) => {
+			if (next && !hovering && !arrivedByKeyboard()) return;
+			open = next;
+		}
+	}
+	{...rest}
+>
+	{@render children?.()}
+</Tooltip.Root>

package/dist/components/tooltip/TooltipRoot.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type TooltipRootProps = Omit<Tooltip.RootProps, 'children'> & {
+    /** A Tooltip.Trigger and a Tooltip.Content. */
+    children?: Snippet;
+};
+export declare const HOVER_KEY: unique symbol;
+declare const TooltipRoot: import("svelte").Component<TooltipRootProps, {}, "open">;
+type TooltipRoot = ReturnType<typeof TooltipRoot>;
+export default TooltipRoot;

package/dist/components/tooltip/TooltipTrigger.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import { Tooltip } from 'bits-ui';
+	import { getContext } from 'svelte';
+	import { HOVER_KEY } from './TooltipRoot.svelte';
+
+	export type TooltipTriggerProps = Tooltip.TriggerProps;
+</script>
+
+<script lang="ts">
+	let { onpointerenter, onpointerleave, ...rest }: TooltipTriggerProps = $props();
+
+	const hover = getContext<((value: boolean) => void) | undefined>(HOVER_KEY);
+</script>
+
+<Tooltip.Trigger
+	{...rest}
+	onpointerenter={(event) => {
+		hover?.(true);
+		onpointerenter?.(event);
+	}}
+	onpointerleave={(event) => {
+		hover?.(false);
+		onpointerleave?.(event);
+	}}
+/>

package/dist/components/tooltip/TooltipTrigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Tooltip } from 'bits-ui';
+export type TooltipTriggerProps = Tooltip.TriggerProps;
+declare const TooltipTrigger: import("svelte").Component<TooltipTriggerProps, {}, "">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

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

@@ -0,0 +1,13 @@
+import { Tooltip } from 'bits-ui';
+import Content from './TooltipContent.svelte';
+import Root from './TooltipRoot.svelte';
+import Trigger from './TooltipTrigger.svelte';
+/**
+ * Place one Provider near the root of the app. Its delay applies to every
+ * tooltip inside, and once one is open the next opens without waiting.
+ */
+declare const Provider: import("svelte").Component<Tooltip.ProviderProps, {}, "">;
+export { Provider, Root, Trigger, Content };
+export type { TooltipContentProps } from './TooltipContent.svelte';
+export type { TooltipRootProps } from './TooltipRoot.svelte';
+export type { TooltipTriggerProps } from './TooltipTrigger.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1,10 @@
+import { Tooltip } from 'bits-ui';
+import Content from './TooltipContent.svelte';
+import Root from './TooltipRoot.svelte';
+import Trigger from './TooltipTrigger.svelte';
+/**
+ * Place one Provider near the root of the app. Its delay applies to every
+ * tooltip inside, and once one is open the next opens without waiting.
+ */
+const Provider = Tooltip.Provider;
+export { Provider, Root, Trigger, Content };

package/dist/components/tooltip/intent.d.ts

@@ -0,0 +1,2 @@
+export declare function listenForNavigation(): void;
+export declare const arrivedByKeyboard: () => boolean;

package/dist/components/tooltip/intent.js

@@ -0,0 +1,29 @@
+/**
+ * Whether focus arrived from the keyboard just now. A tooltip should open on
+ * focus only then: when focus is handed back by a closing menu or dialog, or
+ * returns with the window, its tooltip popping open is noise. (Eregion, 9a4b4ecc.)
+ */
+const NAVIGATION_KEYS = new Set([
+    'Tab',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+    'F6'
+]);
+let lastNavigation = -Infinity;
+let listening = false;
+export function listenForNavigation() {
+    if (listening || typeof window === 'undefined')
+        return;
+    listening = true;
+    window.addEventListener('keydown', (event) => {
+        if (NAVIGATION_KEYS.has(event.key))
+            lastNavigation = performance.now();
+    }, { capture: true });
+    // A press of the pointer since then means the person is not navigating by keyboard
+    window.addEventListener('pointerdown', () => (lastNavigation = -Infinity), { capture: true });
+}
+export const arrivedByKeyboard = () => performance.now() - lastNavigation < 600;

package/dist/components/work-fold/WorkFold.svelte

@@ -0,0 +1,100 @@
+<!--
+	Folds a finished turn's working away behind one line, "Worked for 2m 5s",
+	so the answer is what shows. Opened, the work hangs from a rule beneath it.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Chevron from '../../internal/Chevron.svelte';
+	import Collapse from '../../internal/Collapse.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Tile from '../../internal/Tile.svelte';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type WorkFoldProps = {
+		/** What the fold holds, in words: "Worked for 2m 5s". */
+		label: string;
+		/** Whether the work shows. Bindable. */
+		open?: boolean;
+		sx?: Sx;
+		class?: string;
+		/** The turn's working: Reasoning, Activity rows, notes. */
+		children?: Snippet;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		root: { display: 'flex', flexDirection: 'column', minWidth: 0 },
+		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,
+			cursor: 'pointer',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'color',
+			transitionDuration: motion.fast,
+			transitionTimingFunction: 'ease'
+		},
+		label: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' },
+		chevron: { display: 'grid', color: colors.textSubtle },
+		// The work hangs from a rail under the tile, its rows in line with the label
+		work: {
+			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.25rem',
+			borderInlineStartWidth: '1px',
+			borderInlineStartStyle: 'solid',
+			borderInlineStartColor: colors.line
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { label, open = $bindable(false), sx, class: className, children }: WorkFoldProps = $props();
+
+	const uid = $props.id();
+</script>
+
+<div data-slot="work-fold" {...attrs([styles.root, sx], className)}>
+	<button
+		type="button"
+		id="{uid}-trigger"
+		aria-expanded={open}
+		aria-controls="{uid}-work"
+		{...stylex.attrs(styles.trigger)}
+		onclick={() => (open = !open)}
+	>
+		<Tile glyph="layers" />
+		<span {...stylex.attrs(styles.label)}
+			>{label}<span {...stylex.attrs(styles.chevron)}><Chevron {open} size={12} /></span></span
+		>
+	</button>
+	<Collapse
+		{open}
+		id="{uid}-work"
+		role="region"
+		aria-labelledby="{uid}-trigger"
+		innerSx={styles.work}
+	>
+		{@render children?.()}
+	</Collapse>
+</div>

package/dist/components/work-fold/WorkFold.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type WorkFoldProps = {
+    /** What the fold holds, in words: "Worked for 2m 5s". */
+    label: string;
+    /** Whether the work shows. Bindable. */
+    open?: boolean;
+    sx?: Sx;
+    class?: string;
+    /** The turn's working: Reasoning, Activity rows, notes. */
+    children?: Snippet;
+};
+declare const WorkFold: import("svelte").Component<WorkFoldProps, {}, "open">;
+type WorkFold = ReturnType<typeof WorkFold>;
+export default WorkFold;

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+export { default as Approval } from './components/approval/Approval.svelte';
+export type { ApprovalAnswer, ApprovalChoice, ApprovalProps } from './components/approval/Approval.svelte';
+export * as AppShell from './components/app-shell/index.js';
+export { getAppShellContext } from './components/app-shell/index.js';
+export type { AppShellContext, AppShellHeaderProps, AppShellMainProps, AppShellPanelProps, AppShellRootProps, AppShellSidebarProps, AppShellToggleProps } from './components/app-shell/index.js';
+export * as Activity from './components/activity/index.js';
+export type { ActivityContentProps, ActivityRootProps, ActivityStepKind, ActivityStepProps, ActivityStepStatus, ActivityThoughtProps, ActivityTriggerProps } from './components/activity/index.js';
+export { default as Announcer } from './components/announcer/Announcer.svelte';
+export type { AnnouncerProps } from './components/announcer/Announcer.svelte';
+export * as Avatar from './components/avatar/index.js';
+export type { AvatarFallbackProps, AvatarImageProps, AvatarRootProps, AvatarSize } from './components/avatar/index.js';
+export { default as Badge } from './components/badge/Badge.svelte';
+export type { BadgeProps, BadgeTone } from './components/badge/Badge.svelte';
+export { default as Button } from './components/button/Button.svelte';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './components/button/Button.svelte';
+export { default as Card } from './components/card/Card.svelte';
+export type { CardPadding, CardProps, CardVariant } from './components/card/Card.svelte';
+export { default as ChangeStats } from './components/change-stats/ChangeStats.svelte';
+export type { ChangeStatsProps } from './components/change-stats/ChangeStats.svelte';
+export { default as ChangesSummary } from './components/changes-summary/ChangesSummary.svelte';
+export type { ChangedFile, ChangesSummaryProps } from './components/changes-summary/ChangesSummary.svelte';
+export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
+export type { CheckboxProps } from './components/checkbox/Checkbox.svelte';
+export { default as Code } from './components/code/Code.svelte';
+export type { CodeProps } from './components/code/Code.svelte';
+export * as Command from './components/command/index.js';
+export type { CommandDialogProps, CommandEmptyProps, CommandFooterProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandRootProps } from './components/command/index.js';
+export * as Composer from './components/composer/index.js';
+export { getComposerContext } from './components/composer/index.js';
+export type { ComposerAttachButtonProps, ComposerAttachmentProps, ComposerAttachmentsProps, ComposerContext, ComposerMessage, ComposerModel, ComposerModelPickerProps, ComposerRejection, ComposerRootProps, ComposerStatus, ComposerSubmitProps, ComposerTextareaProps, ComposerToggleProps, ComposerToolbarProps } from './components/composer/index.js';
+export * as ContextMenu from './components/menu/context-menu.js';
+export type { ContextMenuContentProps, ContextMenuTriggerProps } from './components/menu/context-menu.js';
+export * as Conversation from './components/conversation/index.js';
+export { getConversationContext } from './components/conversation/index.js';
+export type { ConversationContentProps, ConversationContext, ConversationMode, ConversationEmptyProps, ConversationRootProps, ConversationScrollButtonProps } from './components/conversation/index.js';
+export { default as ConfirmDialog } from './components/dialog/ConfirmDialog.svelte';
+export type { ConfirmDialogProps } from './components/dialog/ConfirmDialog.svelte';
+export * as Dialog from './components/dialog/index.js';
+export type { DialogBodyProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps } from './components/dialog/index.js';
+export { default as Divider } from './components/divider/Divider.svelte';
+export type { DividerProps } from './components/divider/Divider.svelte';
+export { default as DevStyles } from './components/dev-styles/DevStyles.svelte';
+export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
+export type { EmptyStateProps } from './components/empty-state/EmptyState.svelte';
+export { default as Field } from './components/field/Field.svelte';
+export type { FieldProps } from './components/field/Field.svelte';
+export { getFieldContext } from './components/field/context.js';
+export type { FieldContext } from './components/field/context.js';
+export { default as Frame } from './components/frame/Frame.svelte';
+export type { FrameProps } from './components/frame/Frame.svelte';
+export { default as Heading } from './components/heading/Heading.svelte';
+export type { HeadingLevel, HeadingProps, HeadingSize } from './components/heading/Heading.svelte';
+export { default as Input } from './components/input/Input.svelte';
+export type { InputProps, InputSize } from './components/input/Input.svelte';
+export { default as Kbd } from './components/kbd/Kbd.svelte';
+export type { KbdProps } from './components/kbd/Kbd.svelte';
+export { default as Link } from './components/link/Link.svelte';
+export type { LinkProps } from './components/link/Link.svelte';
+export * as Menu from './components/menu/index.js';
+export type { MenuCheckboxItemProps, MenuContentProps, MenuItemProps, MenuLabelProps, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentProps, MenuSubTriggerProps } from './components/menu/index.js';
+export * as Message from './components/message/index.js';
+export type { MessageActionProps, MessageActionsProps, MessageContentProps, MessageCopyProps, MessageFrom, MessageHeaderProps, MessagePendingProps, MessageRootProps, MessageTimeProps } from './components/message/index.js';
+export { default as Notice } from './components/notice/Notice.svelte';
+export type { NoticeProps, NoticeTone } from './components/notice/Notice.svelte';
+export { default as Plan } from './components/plan/Plan.svelte';
+export type { PlanProps, PlanStep, PlanStepStatus } from './components/plan/Plan.svelte';
+export { default as Progress } from './components/progress/Progress.svelte';
+export type { ProgressProps } from './components/progress/Progress.svelte';
+export * as Popover from './components/popover/index.js';
+export type { PopoverContentProps } from './components/popover/index.js';
+export { default as Questionnaire } from './components/questionnaire/Questionnaire.svelte';
+export type { Question, QuestionAnswer, QuestionnaireAnswers, QuestionnaireProps } from './components/questionnaire/Questionnaire.svelte';
+export { default as QueuedMessage } from './components/queued-message/QueuedMessage.svelte';
+export type { QueuedMessageProps, QueuedMessageStatus } from './components/queued-message/QueuedMessage.svelte';
+export * as Rail from './components/rail/index.js';
+export type { RailItemProps, RailRootProps } from './components/rail/index.js';
+export * as Reasoning from './components/reasoning/index.js';
+export type { ReasoningContentProps, ReasoningRootProps, ReasoningTriggerProps } from './components/reasoning/index.js';
+export { default as ResizeHandle } from './components/resize-handle/ResizeHandle.svelte';
+export type { ResizeHandleProps } from './components/resize-handle/ResizeHandle.svelte';
+export { default as RollingText } from './components/rolling-text/RollingText.svelte';
+export type { RollingTextProps } from './components/rolling-text/RollingText.svelte';
+export { default as SegmentedControl } from './components/segmented/SegmentedControl.svelte';
+export type { SegmentedControlProps, SegmentedOption } from './components/segmented/SegmentedControl.svelte';
+export { default as Select } from './components/select/Select.svelte';
+export type { SelectOption, SelectProps } from './components/select/Select.svelte';
+export { default as Separator } from './components/separator/Separator.svelte';
+export type { SeparatorProps } from './components/separator/Separator.svelte';
+export { default as SettingsRow } from './components/settings-row/SettingsRow.svelte';
+export type { SettingsRowProps } from './components/settings-row/SettingsRow.svelte';
+export { default as Shimmer } from './components/shimmer/Shimmer.svelte';
+export type { ShimmerProps } from './components/shimmer/Shimmer.svelte';
+export * as Sidebar from './components/sidebar/index.js';
+export type { SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps } from './components/sidebar/index.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
+export type { SkeletonProps } from './components/skeleton/Skeleton.svelte';
+export { default as Spinner } from './components/spinner/Spinner.svelte';
+export type { SpinnerProps } from './components/spinner/Spinner.svelte';
+export { default as Stack } from './components/stack/Stack.svelte';
+export type { StackGap, StackProps } from './components/stack/Stack.svelte';
+export * as Suggestions from './components/suggestions/index.js';
+export type { SuggestionsItemProps, SuggestionsRootProps } from './components/suggestions/index.js';
+export { default as StatusIndicator } from './components/status-indicator/StatusIndicator.svelte';
+export type { Status, StatusIndicatorProps } from './components/status-indicator/StatusIndicator.svelte';
+export { default as Switch } from './components/switch/Switch.svelte';
+export type { SwitchProps } from './components/switch/Switch.svelte';
+export { default as Tabs } from './components/tabs/Tabs.svelte';
+export type { TabItem, TabsProps } from './components/tabs/Tabs.svelte';
+export { default as Text } from './components/text/Text.svelte';
+export type { TextProps, TextSize, TextTone, TextWeight } from './components/text/Text.svelte';
+export { default as Textarea } from './components/textarea/Textarea.svelte';
+export type { TextareaProps } from './components/textarea/Textarea.svelte';
+export * as Tool from './components/tool/index.js';
+export type { ToolContentProps, ToolInputProps, ToolOutputProps, ToolRootProps, ToolState, ToolTriggerProps } from './components/tool/index.js';
+export { default as Toaster } from './components/toast/Toaster.svelte';
+export type { ToasterProps } from './components/toast/Toaster.svelte';
+export { toast } from './components/toast/toasts.svelte.js';
+export type { ToastAction, ToastOptions, ToastTone } from './components/toast/toasts.svelte.js';
+export * as Tooltip from './components/tooltip/index.js';
+export type { TooltipContentProps, TooltipRootProps, TooltipTriggerProps } from './components/tooltip/index.js';
+export { default as Theme } from './components/theme/Theme.svelte';
+export type { ThemeOverrides, ThemeProps, ThemeScheme } from './components/theme/Theme.svelte';
+export { default as WorkFold } from './components/work-fold/WorkFold.svelte';
+export type { WorkFoldProps } from './components/work-fold/WorkFold.svelte';
+export { loop, onLoop } from './internal/loop.js';
+export type { LoopFrame } from './internal/loop.js';
+export type { Sx } from './internal/sx.js';

package/dist/index.js

@@ -0,0 +1,93 @@
+// Components
+export { default as Approval } from './components/approval/Approval.svelte';
+// Compound: <AppShell.Root>, <AppShell.Sidebar>, <AppShell.Main>, <AppShell.Header>,
+// <AppShell.Panel>, <AppShell.Toggle>
+export * as AppShell from './components/app-shell/index.js';
+export { getAppShellContext } from './components/app-shell/index.js';
+// Compound: <Activity.Root>, <Activity.Trigger>, <Activity.Content>, <Activity.Step>, <Activity.Thought>
+export * as Activity from './components/activity/index.js';
+export { default as Announcer } from './components/announcer/Announcer.svelte';
+// Compound: <Avatar.Root>, <Avatar.Image>, <Avatar.Fallback>
+export * as Avatar from './components/avatar/index.js';
+export { default as Badge } from './components/badge/Badge.svelte';
+export { default as Button } from './components/button/Button.svelte';
+export { default as Card } from './components/card/Card.svelte';
+export { default as ChangeStats } from './components/change-stats/ChangeStats.svelte';
+export { default as ChangesSummary } from './components/changes-summary/ChangesSummary.svelte';
+export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
+export { default as Code } from './components/code/Code.svelte';
+// Compound: <Command.Dialog>, <Command.Root>, <Command.Input>, <Command.List>, <Command.Group>,
+// <Command.Item>, <Command.Empty>, <Command.Separator>, <Command.Footer>
+export * as Command from './components/command/index.js';
+// Compound: <Composer.Root>, <Composer.Attachments>, <Composer.Textarea>, <Composer.Toolbar>,
+// <Composer.AttachButton>, <Composer.Toggle>, <Composer.ModelPicker>, <Composer.Submit>
+export * as Composer from './components/composer/index.js';
+export { getComposerContext } from './components/composer/index.js';
+// Compound: <ContextMenu.Root>, <ContextMenu.Trigger>, <ContextMenu.Content>, filled with Menu's parts
+export * as ContextMenu from './components/menu/context-menu.js';
+// Compound: <Conversation.Root>, <Conversation.Content>, <Conversation.ScrollButton>, <Conversation.Empty>
+export * as Conversation from './components/conversation/index.js';
+export { getConversationContext } from './components/conversation/index.js';
+export { default as ConfirmDialog } from './components/dialog/ConfirmDialog.svelte';
+// Compound: <Dialog.Root>, <Dialog.Trigger>, <Dialog.Content>, <Dialog.Header>, <Dialog.Title>,
+// <Dialog.Description>, <Dialog.Body>, <Dialog.Footer>, <Dialog.Close>
+export * as Dialog from './components/dialog/index.js';
+export { default as Divider } from './components/divider/Divider.svelte';
+export { default as DevStyles } from './components/dev-styles/DevStyles.svelte';
+export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
+export { default as Field } from './components/field/Field.svelte';
+export { getFieldContext } from './components/field/context.js';
+export { default as Frame } from './components/frame/Frame.svelte';
+export { default as Heading } from './components/heading/Heading.svelte';
+export { default as Input } from './components/input/Input.svelte';
+export { default as Kbd } from './components/kbd/Kbd.svelte';
+export { default as Link } from './components/link/Link.svelte';
+// Compound: <Menu.Root>, <Menu.Trigger>, <Menu.Content>, <Menu.Item>, <Menu.CheckboxItem>,
+// <Menu.RadioGroup>, <Menu.RadioItem>, <Menu.Group>, <Menu.Label>, <Menu.Separator>, <Menu.Sub>…
+export * as Menu from './components/menu/index.js';
+// Compound: <Message.Root>, <Message.Header>, <Message.Pending>, <Message.Content>, <Message.Actions>, <Message.Action>, <Message.Copy>
+export * as Message from './components/message/index.js';
+export { default as Notice } from './components/notice/Notice.svelte';
+export { default as Plan } from './components/plan/Plan.svelte';
+export { default as Progress } from './components/progress/Progress.svelte';
+// Compound: <Popover.Root>, <Popover.Trigger>, <Popover.Content>, <Popover.Close>
+export * as Popover from './components/popover/index.js';
+export { default as Questionnaire } from './components/questionnaire/Questionnaire.svelte';
+export { default as QueuedMessage } from './components/queued-message/QueuedMessage.svelte';
+// Compound: <Rail.Root>, <Rail.Item>, <Rail.Spacer>
+export * as Rail from './components/rail/index.js';
+// Compound: <Reasoning.Root>, <Reasoning.Trigger>, <Reasoning.Content>
+export * as Reasoning from './components/reasoning/index.js';
+export { default as ResizeHandle } from './components/resize-handle/ResizeHandle.svelte';
+export { default as RollingText } from './components/rolling-text/RollingText.svelte';
+export { default as SegmentedControl } from './components/segmented/SegmentedControl.svelte';
+export { default as Select } from './components/select/Select.svelte';
+export { default as Separator } from './components/separator/Separator.svelte';
+export { default as SettingsRow } from './components/settings-row/SettingsRow.svelte';
+export { default as Shimmer } from './components/shimmer/Shimmer.svelte';
+// Compound: <Sidebar.Header>, <Sidebar.Content>, <Sidebar.Group>, <Sidebar.Item>, <Sidebar.Footer>
+export * as Sidebar from './components/sidebar/index.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
+export { default as Spinner } from './components/spinner/Spinner.svelte';
+export { default as Stack } from './components/stack/Stack.svelte';
+// Compound: <Suggestions.Root>, <Suggestions.Item>
+export * as Suggestions from './components/suggestions/index.js';
+export { default as StatusIndicator } from './components/status-indicator/StatusIndicator.svelte';
+export { default as Switch } from './components/switch/Switch.svelte';
+export { default as Tabs } from './components/tabs/Tabs.svelte';
+export { default as Text } from './components/text/Text.svelte';
+export { default as Textarea } from './components/textarea/Textarea.svelte';
+// Compound: <Tool.Root>, <Tool.Trigger>, <Tool.Content>, <Tool.Input>, <Tool.Output>
+export * as Tool from './components/tool/index.js';
+export { default as Toaster } from './components/toast/Toaster.svelte';
+export { toast } from './components/toast/toasts.svelte.js';
+// Compound: <Tooltip.Provider>, <Tooltip.Root>, <Tooltip.Trigger>, <Tooltip.Content>
+export * as Tooltip from './components/tooltip/index.js';
+export { default as Theme } from './components/theme/Theme.svelte';
+export { default as WorkFold } from './components/work-fold/WorkFold.svelte';
+// Utilities
+// One shared, low-rate clock for anything that moves for as long as it is on
+// screen. Spinner, Shimmer and Progress run on it; so can an app's own loops.
+export { loop, onLoop } from './internal/loop.js';
+// Design tokens live in `@diegopluna/narvi/tokens.stylex.js`. StyleX can only resolve them
+// at build time when they are imported straight from that file.

package/dist/internal/Chevron.svelte

@@ -0,0 +1,28 @@
+<!-- The chevron of a folding part: points along the line when shut, down when open. -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import Glyph from './Glyph.svelte';
+	import { motion } from '../tokens.stylex.js';
+
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+
+	const styles = stylex.create({
+		chevron: {
+			display: 'grid',
+			flexShrink: 0,
+			rotate: { default: '-90deg', ':dir(rtl)': '90deg' },
+			transitionProperty: { default: 'none', [MOTION]: 'rotate' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeOut
+		},
+		open: { rotate: '0deg' }
+	});
+</script>
+
+<script lang="ts">
+	let { open, size = 14 }: { open: boolean; size?: number } = $props();
+</script>
+
+<span data-slot="chevron" {...stylex.attrs(styles.chevron, open && styles.open)}>
+	<Glyph name="chevron" {size} />
+</span>

package/dist/internal/Chevron.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    open: boolean;
+    size?: number;
+};
+declare const Chevron: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chevron = ReturnType<typeof Chevron>;
+export default Chevron;

package/dist/internal/Code.svelte

@@ -0,0 +1,70 @@
+<!--
+	A value shown as code. Strings as they are; anything else as indented JSON,
+	coloured: keys in slate, strings in moss, numbers in copper, literals in heather.
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { tokenize } from './json.js';
+	import type { Sx } from './sx.js';
+	import { colors, font, radius } from '../tokens.stylex.js';
+
+	const styles = stylex.create({
+		pre: {
+			boxSizing: 'border-box',
+			maxHeight: '16rem',
+			margin: 0,
+			paddingBlock: '0.625rem',
+			paddingInline: '0.75rem',
+			overflow: 'auto',
+			borderRadius: radius.md,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.text,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingNormal,
+			tabSize: 2,
+			whiteSpace: 'pre',
+			scrollbarWidth: 'thin',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '-2px'
+		},
+		// Browsers give <code> a monospace of their own; this keeps Narvi's
+		code: { fontFamily: 'inherit' },
+		wrap: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },
+		danger: { color: colors.danger },
+		key: { color: colors.codeKey },
+		string: { color: colors.codeString },
+		number: { color: colors.codeNumber, fontVariantNumeric: 'tabular-nums' },
+		literal: { color: colors.codeLiteral },
+		punct: { color: colors.codePunct }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		value,
+		tone = 'default',
+		wrap = false,
+		sx
+	}: { value: unknown; tone?: 'default' | 'danger'; wrap?: boolean; sx?: Sx } = $props();
+
+	const tokens = $derived(tokenize(value));
+</script>
+
+<!-- Long output scrolls; the region is focusable so it can be scrolled from the keyboard -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<pre
+	tabindex="0"
+	{...stylex.attrs(
+		styles.pre,
+		(wrap || tone === 'danger') && styles.wrap,
+		tone === 'danger' && styles.danger,
+		sx
+	)}><code {...stylex.attrs(styles.code)}
+		>{#each tokens as token, i (i)}{#if token.kind}<span {...stylex.attrs(styles[token.kind])}
+					>{token.text}</span
+				>{:else}{token.text}{/if}{/each}</code
+	></pre>

package/dist/internal/Code.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Sx } from './sx.js';
+type $$ComponentProps = {
+    value: unknown;
+    tone?: 'default' | 'danger';
+    wrap?: boolean;
+    sx?: Sx;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;